<template > 
    	<div class="" style="height: calc(100vh - 80px); background-color: #f3f4f7;box-sizing: border-box; ">
        <div class="content">
            <div class="login">
		<!-- <div class="header">
			<div class="w1200">
				<a href="index.html"><img src="../../assets/picture/logo.png"></a>
			</div>
		</div> -->
		<div class="login_con">
			<div class="w1200">
				<img src="../../assets/picture/login_img.png" class="loginImg">
				<div class="input">
					<h3>用户登录</h3>
					<p class="tel">
						<i></i>
						<input type="text" v-model="username"  class="userName" id="userName" placeholder="请输入您的账号">
					</p>
					<p class="setPwd">
						<i></i>
						<input type="password" v-model="password"  class="userPwd" id="userPwd" placeholder="请输入您的密码">
					</p>
					<div class="autologin">
						<!-- <input type="checkbox" name="autologin" id="autologin">
						<span>下次自动登录</span> -->
						<a @click = "$router.push('/forgetpw')" target="_blank" class="fr">找回密码？</a>
					</div>
					<input @click = "submit" type="submit" name="enter" class="enter" id="enter" value="立即登录">
					
					<!-- <a href="reg.html" target="_blank" class="aBotm">注册新用户&gt;&gt;</a> -->
				</div>
			</div>
		</div>
	</div>
        </div>
    </div>
</template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
    export default {
        name: "tem",
        mixins: [pagePublic],
        data(){
            return{
				
				// username:'',
				// password:'',
                username:'',
				password:'',

                // urls:{
                //     list: {
                //         url:this.$api.tem.list,
                //         method:"get",
                //         sync:false,
                //     },
                //     add:this.$api.tem.add,
                //     edit:this.$api.tem.edit,
                //     del:this.$api.tem.del
                // },

                
            }
        },
        computed: {
            ...mapState(['configInfo']),

        },
        created() {
            
        },
        methods:{
            ...mapMutations(['set_token','set_userInfo','set_userInfo','set_student_id']),
			submit(){
				this.$api.login({username:this.username,password:this.password}).then((res)=>{
					console.log(res)

					if(res.status == 200){
						console.log(res.data)
						this.set_token(res.token);
						this.set_userInfo(res.data);
						if(res.data&&res.data.student_id){
							this.set_student_id(res.data.student_id);
						}
						this.getUserInfo()

                        this.$router.push({path:'/'});
					}
				})
			},
			getUserInfo(){
				this.$api.userInfo().then(res => {
					if(res.status == 200){
					this.set_userInfo(JSON.stringify(res.data))
					localStorage.setItem('userInfo', JSON.stringify(res.data));
					// this.userInfo = res.data
					}
				})
			},
        }
    }
</script>
<style lang="scss" scoped>
/*登录页*/
.login{width: 100%; }
.login .header{background: #fff; padding: 16px 0;}
.login .header a{display: block; height: 60px;}
.login .header a img{height: 100%;}
.login .login_con{ background: #f3f4f7;}
.login .loginImg{margin: 136px 0 0 96px;}
.login .input{width: 370px; height: 500px;background-size: 100% 100%; padding: 0 53px; margin: 58px 60px 0 0; background: url(../../assets/image/login_bg1.png); float: right;}
.login .input h3{font-size: 30px; color: var(--bg-color,'#FF6900'); padding: 58px 0 56px; letter-spacing: 1px; text-align: center;}
.login .input p{border: 1px solid #eaeaea; height: 46px; border-radius: 4px; margin-bottom: 30px; display: flex;}
.login .input .mb20{margin-bottom: 20px;}
.login .input select{border: 1px solid #eaeaea; height:42px; border-radius: 4px; margin-bottom: 20px; text-align: center; color: #757575; width: 100%; font-size: 15px; }
.login .input p i{display: block; width: 34px; height: 24px; margin: 11px 0; border-right:1px solid #eaeaea;}
.login .input p input[type="text"], input[type="Password"]{border: 0; text-indent: 10px; outline: 0; }
.login .input p.tel i{background: url(../../assets/image/login_tel.png)no-repeat center center;}
.login .input p.yzm{position: relative;}
.login .input p.yzm i{background: url(../../assets/image/login_yzm.png)no-repeat center center;}
.login .input p.setPwd i{background: url(../../assets/image/login_pwd.png)no-repeat center center;}
.login .input input[type="submit"]{width: 100%; height: 46px; background: var(--bg-color,'#FF6900'); color: #fff; font-size: 22px; border-radius: 26px; border: 0; box-shadow: 0 3px 6px var(--bg-color,'#FF6900');}
.login .input input[type="submit"]:hover{opacity: .9; cursor: pointer;}
.login .input .autologin{margin-bottom: 20px;}
.login .input .autologin input[type="checkbox"]{margin-right: 6px; position: relative; top: 1px;}
.login .input .autologin a{color: var(--bg-color,'#FF6900');}
.login .input .autologin a:hover{text-decoration: underline;}
.login .input .agree{display: flex; margin-bottom: 20px;}
.login .input .agree input[type="checkbox"]{margin-right: 6px; position: relative; top: 3px;}
.login .input .agree a{color: var(--bg-color,'#FF6900');}
.login .input .agree a:hover{text-decoration: underline;}
.login .input .getCode{width: 120px; height: 48px; color: var(--bg-color,'#FF6900'); font-size: 16px; float: right; background: #fff; border: 1px solid #eaeaea; border-radius: 4px; position: absolute; right: -1px; top: -1px;}
.login .input .getCode:hover{background: var(--bg-color,'#FF6900'); color: #fff; cursor: pointer;}
.login .input .aBotm{display: block; color: var(--bg-color,'#FF6900'); text-align: center; margin-top: 26px;}
.login .input .aBotm:hover{text-decoration: underline;}

@media (max-width:768px) {
	html, body{min-width: auto; background: #fff;}
	.login{width: 100%; height: 100%;}
	.login .w1200{width: 100%;}
	.login .header{padding: 46px 0 36px;}
	.login .header a{text-align: center;}
	.login .login_con{height: auto; background: #fff;}
	.login .input{float: none; background: #fff; width: 92%; height: auto; padding: 0; margin: 0 auto;}
	.login .input .getCode{border-color: #e2e2e2}
	.login .input p{border-color: #e2e2e2;}
	.login .loginImg{display: none;}
	.login .input h3{display: none;}
	.footer{display: none;}
}
</style>